<!-- 引用 -->
<template>
	<el-drawer v-model="isShowDrawer" direction="rtl" :before-close="handleClose" :size="curDrawerSize" :close-on-click-modal="isReadOnly">
		<template #header="{ titleId, titleClass }">
			<div class="zs-drawer-header" :id="titleId" :class="titleClass">
				<i class="icon-b-item zs-icon zs-text-blue zs-space-right-sm"></i>
				<div class="zs-title zs-text-black">引用事项</div>
			</div>
		</template>

		<template #default>
			<el-container class="zs-drawer-container">
				<el-scrollbar class="zs-drawer-content">
					<!-- card1 -->
					<div class="zs-align-center zs-space-bottom" id="sm-drawer-demo-card-01">
						<i class="icon-s-item zs-icon zs-text-blue zs-space-right-sm"></i>
						<div class="zs-title">引用事项</div>
					</div>
					<div class="zs-card zs-space-bottom">
						<el-form ref="form1" label-position="right" label-width="100px" :model="queryParams.data">
							<el-form-item label="点位类型：">
								<el-select v-model="queryParams.data.pointType" class="zs-full-item" placeholder="巡检类型" @change="getPointList">
									<el-option v-for="item in pointTypeList" :key="item.id" :label="item.dicName" :value="item.id" />
								</el-select>
							</el-form-item>
							<el-form-item label="点位名称：">
								<el-select v-model="queryParams.data.pointId" class="zs-full-item" placeholder="巡检名称" filterable @change="queryList">
									<el-option v-for="item in pointList" :key="item.id" :label="item.pointName" :value="item.id" />
								</el-select>
							</el-form-item>
						</el-form>
					</div>

					<div class="zs-align-center zs-space-bottom" id="sm-drawer-demo-card-02">
						<i class="icon-s-item zs-icon zs-text-blue zs-space-right-sm"></i>
						<div class="zs-title">巡检标准</div>
					</div>
					<div class="zs-card zs-space-bottom">
						<div class="zs-card-sm zs-space-bottom">
							<span>
								<el-select v-model="queryParams.data.inspectionType" class="zs-select-md zs-space-right-sm" placeholder="巡检类型" clearable filterable @change="queryList">
									<el-option v-for="item in standradTypeList" :key="item.id" :label="item.dicName" :value="item.id" />
								</el-select>
								<el-button class="zs-btn-plain" @click="queryList" v-btnPermi="{ permis: ['p_btn_property_maintenance_device_config_list_query'] }"> 查询 </el-button>
							</span>
						</div>

						<!-- teble -->
						<div class="zs-card zs-table-page-content zs-layout-flex-auto">
							<el-table ref="tableRef" class="zs-table-page-main" row-key="id" :data="tableData.data" v-loading="tableData.loading" :header-checkbox-disabled="handleType == 'edit' ? true : false" stripe @selection-change="handleSelectionChange">
								<el-table-column type="selection" width="55" />
								<el-table-column type="index" label="序号" width="60" align="center" />
								<el-table-column prop="inspectionTypeName" label="巡检类型" align="left" show-overflow-tooltip />
								<el-table-column prop="inspectionContent" label="巡检内容" align="left" show-overflow-tooltip />
							</el-table>
						</div>
					</div>
				</el-scrollbar>
				<hsDocWrapper :nodeList="curNodeList" />
			</el-container>
		</template>

		<template #footer>
			<div>
				<el-button class="zs-btn-md zs-btn-primary" @click="doConfirm">提交</el-button>
			</div>
		</template>
	</el-drawer>
</template>

<script setup>
	import { standardListApi, planQuoteBindApi } from '@/api/inspect.js';
	import { inspectListApi } from '@/api/inspect.js';
	import { ElMessage } from 'element-plus';
	import { ref, reactive, watch, nextTick } from 'vue';
	import { useRoute } from 'vue-router';
	import { useStore } from 'vuex';

	const route = useRoute();
	let store = useStore();
	const curDrawerSize = ref(store.state.uiDrawerSizeBig);

	const props = defineProps({
		isShow: { type: Boolean, default: false },
		isReadOnly: { type: Boolean, default: true },
		handleType: { type: String, default: '' },
		currentRow: { type: Object },
		standradTypeList: { type: Array },
		pointTypeList: { type: Array },
	});

	const tableRef = ref();

	const emit = defineEmits(['close']);

	let isShowDrawer = ref(props.isShow);

	//查询条件
	let queryParams = reactive({ data: {} });

	// 列表 filed
	let tableData = reactive({
		loading: false,
		data: [],
	});

	const curNodeList = ref([
		{ name: '引用事项', id: 'sm-drawer-demo-card-01' },
		{ name: '巡检标准', id: 'sm-drawer-demo-card-02' },
	]);

	const form1 = ref();
	watch(
		() => props.isShow,
		(newVal, oldVal) => {
			isShowDrawer.value = newVal;
			nextTick(() => {
				newVal && props.handleType == 'add' && initForm();
			});
		},
	);

	//列表
	const queryList = async () => {
		if (!queryParams.data.pointId) {
			tableData.data = [];
			return;
		}
		tableData.loading = true;
		let res = await standardListApi(queryParams.data);
		if (res.data.code !== 200) return;
		tableData.loading = false;
		tableData.data = res.data.data.list || [];
		nextTick(() => {
			tableData.data.forEach(v => {
				tableRef.value.toggleRowSelection(v, true);
			});
		});
	};

	//提交
	const doConfirm = async () => {
		let ids = chooseTagList.value.map(item => item.id);
		let params = { ids: ids, pointId: route.query.pointId };
		let res = await planQuoteBindApi(params);
		if (res.data.code !== 200) return;
		ElMessage({
			message: '提交成功',
			type: 'success',
		});
		isShowDrawer.value = false;
		emit('close', { isShow: false, isRefresh: true });
	};

	//选择
	let chooseTagList = ref([]);
	const handleSelectionChange = data => {
		chooseTagList.value = data;
	};

	//关闭抽屉
	const handleClose = done => {
		emit('close', { isShow: false });
		done();
	};

	//表单初始化
	const initForm = () => {
		queryParams.data = { pointType: '', pointId: '', inspectionType: '', effectiveState: '1' };
		tableData.data = [];
		const forms = [form1];
		forms.forEach(form => {
			form.value.resetFields();
		});
	};

	// 巡检点位列表
	let pointList = ref([]);
	const getPointList = async () => {
		console.log(queryParams.data);
		let res = await inspectListApi({ pointType: queryParams.data.pointType, projectCode: route.query.projectCode, effectiveState: '1', pageNumber: 1, pageSize: 1000 });
		if (res.data.code !== 200) return;
		pointList.value = res.data.data.list || [];
	};
</script>
